<form method="post" action="{{ url('/table/zoom-search', {'db': db, 'table': table}) }}" name="displayResultForm" id="zoom_display_form" class="ajax">
  {{ get_hidden_inputs(db, table) }}
  <input type="hidden" name="goto" value="{{ goto }}">
  <input type="hidden" name="back" value="{{ url('/table/zoom-search', {'db': db, 'table': table}) }}">

  <div class="card">
    <div class="card-header">{{ t('Browse/Edit the points') }}</div>

    <div class="card-body">
      {% if zoom_submit and data is not empty %}
        <a class="btn btn-secondary" id="help_dialog" href="#">{{ t('How to use') }}</a>
        <button class="btn btn-secondary button-reset">{{ t('Reset zoom') }}</button>
        {# JSON encode the data(query result) #}
        <div id="querydata" class="hide">{{ data_json }}</div>
        <div class="mt-3" id="resizer">
          <canvas id="queryChartCanvas" aria-label="{{ t('The generated chart') }}" role="img"></canvas>
        </div>
      {% endif %}

      <div class="modal fade" id="dataPointModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="dataPointModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="dataPointModalLabel">{{ t('Loading') }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
            </div>
            <div class="modal-body" style="overflow: auto;">
              {# Displays rows in point edit form #}
              <div id="dataDisplay">
                <table class="table align-middle">
                  <thead>
                  <tr>
                    <th>{{ t('Column') }}</th>
                    <th>{{ t('Null') }}</th>
                    <th>{{ t('Value') }}</th>
                  </tr>
                  </thead>
                  <tbody>
                  {% for column_index in 0..column_names|length - 1 %}
                    {% set field_popup = column_names[column_index] %}
                    <tr class="noclick">
                      <th>{{ column_names[column_index] }}</th>
                      {# Null checkbox if column can be null #}
                      <th>
                        {% if column_null_flags[column_index] == 'YES' %}
                          <input type="checkbox" class="checkbox_null" name="criteriaColumnNullFlags[{{ column_index }}]" id="edit_fields_null_id_{{ column_index }}">
                        {% endif %}
                      </th>
                      {# Column's Input box #}
                      <th>
                        {% include 'table/search/input_box.twig' with {
                          'str': '',
                          'column_type': column_types[column_index],
                          'column_data_type': column_data_types[column_index],
                          'html_attributes': '',
                          'column_id': column_types[column_index] ? 'edit_fieldID_' : 'fieldID_',
                          'in_zoom_search_edit': true,
                          'column_name': field_popup,
                          'column_name_hash': column_names_hashes[field_popup],
                          'foreign_data': foreign_data[column_index],
                          'table': table,
                          'column_index': column_index,
                          'criteria_values': '',
                          'db': db,
                          'in_fbs': false,
                          'foreign_dropdown': foreign_dropdown[column_index] ?? '',
                          'has_foreigner': search_columns_in_foreigners[column_index],
                          'is_integer': column_data_types[column_index] == 'INT',
                          'is_float': column_data_types[column_index] == 'FLOAT',
                        } only %}
                      </th>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" id="dataPointSaveButton" data-bs-dismiss="modal">{{ t('Save') }}</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
            </div>
          </div>
        </div>
      </div>

      <input type="hidden" id="queryID" name="sql_query">
    </div>
  </div>
</form>

<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="helpModalLabel">{{ t('Loading') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
